<template>
	<view>
		<l-painter :board="poster" ref="painter" />
	</view>
</template>
<script>
	import {
		formatPrice
	} from '@/utils/tools'
	export default {
		name: "goods-poster",
		props: {
			options: {
				type: Object,
				default: () => ({}),
			},
			leader: {
				type: Object,
				default: () => ({}),
			},
			goods: {
				type: Object,
				default: () => ({}),
			},
			activity: {
				type: Object,
				default: () => ({}),
			},
		},
		data() {
			return {
				prec: 2,
				autoPrec: true
			};
		},
		computed: {
			poster() {

				var portrait = [],
					buy_avatar = this.activity.buy_avatar ?? []

				if (buy_avatar.length > 0) {
					buy_avatar.forEach((item) => {
						portrait.push({
							css: {
								float: 'left',
								marginLeft: '-15rpx',
								width: '46rpx',
								height: '46rpx',
								borderRadius: '45%',
								border: '2px solid #ffffff',
							},
							src: item,
							type: "image",
						})
					})

					portrait.push({
						css: {
							float: 'left',
							margin: '6rpx 0 0 5rpx',
						},
						type: "view",
						views: [{
							css: {
								color: 'rgba(166, 166, 166, 1)',
							},
							text: this.$zhTran('等' + this.activity.buy_user + '人参与团购'),
							type: "text",
						}]
					})
				}
				return {
					css: {
						// 根节点若无尺寸，自动获取父级节点
						width: '675rpx',
						padding: '30rpx',
						backgroundColor: 'rgba(255, 255, 255, 1)',
						borderRadius: '10rpx',
					},
					views: [{
							css: {
								display: 'flex',
								flexDirection: 'row',
								alignItems: 'center',
								marginBottom: '20rpx',
							},
							type: "view",
							views: [{
								css: {
									width: '80rpx',
									height: '80rpx',
									borderRadius: '50%',
									marginRight: '20rpx'
								},
								src: this.leader.user_info?.avatar,
								type: "image",
							}, {
								css: {
									position: 'fixed',
									top: '30rpx',
									left: '120rpx',
									marginBottom: '20rpx',
								},
								type: "view",
								views: [{
									css: {
										width: 'calc(100% - 80rpx)',
										marginBottom: '40rpx',
									},
									type: "view",
									views: [{
										css: {
											position: 'absolute',
											top: '0',
											left: '0',
											zIndex: '899',
											width: '92rpx',
											height: '30rpx',
										},
										src: this.$getImageUri(
											'resource/image/shopapi/uniapp/leader-badge.png'
										),
										type: "image",
									}, {
										css: {
											position: 'absolute',
											top: '3rpx',
											left: '7rpx',
											zIndex: '999',
											color: '#fff',
											fontSize: '18rpx',
										},
										text: '团长分享',
										type: "text",
									}, {
										css: {
											position: 'absolute',
											top: '0',
											left: '100rpx',
											color: 'rgba(38, 38, 38, 1)',
											fontSize: '28rpx',
										},
										text: this.leader.name,
										type: "text",
									}]
								}, {
									css: {
										color: 'rgba(166, 166, 166, 1)',
										fontSize: '22rpx'
									},
									text: this.$zhTran('这里有超值团购，机不可失，赶紧来抢!'),
									type: "text",
								}]
							}],
						}, {
							css: {
								position: 'relative',
							},
							type: "view",
							views: [{
									css: {
										width: '675rpx',
										height: '675rpx',
									},
									src: this.goods.goods_image,
									type: "image",
								},
								{
									css: {
										width: '675rpx',
										height: '675rpx',
										position: 'absolute',
										top: '0',
										left: '0',
										zIndex: '100'
									},
									src: this.$getImageUri('resource/image/shopapi/default/share-leader-bg.png'),
									type: "image",
								}, {
									css: {
										position: 'absolute',
										bottom: '20rpx',
										left: '30rpx',
										zIndex: '200',
										color: '#fff',
										fontSize: '22rpx',
									},
									type: "view",
									views: [{
										css: {
											marginBottom: '10rpx',
										},
										type: "view",
										views: [{
											css: {
												fontSize: '32rpx'
											},
											text: this.$zhTran('团购价'),
											type: "text",
										}]
									}, {
										type: "view",
										views: [{
											css: {
												display: 'flex',
												alignItems: 'flex-end',
											},
											type: "view",
											views: [{
												type: "view",
												views: [{
													css: {
														fontSize: '32rpx',
														paddingBottom: '4rpx'
													},
													text: '￥',
													type: "text",
												}]
											}, {
												type: "view",
												views: [{
													css: {
														fontSize: '42rpx',
														marginRight: '3rpx'
													},
													text: this.integer,
													type: "text",
												}, ]
											}, {
												type: "view",
												views: [{
													css: {
														fontSize: '32rpx',
														paddingBottom: '4rpx'
													},
													text: this
														.decimals,
													type: "text",
												}]
											}, ],
										}]
									}, ]
								}, {
									css: {
										position: 'absolute',
										bottom: '20rpx',
										left: '280rpx',
										zIndex: '200',
										display: 'flex',
										alignItems: 'center',
									},
									type: "view",
									views: [{
										css: {
											color: '#fff',
											fontSize: '28rpx',
										},
										text: this.$zhTran('已抢' + this.goods.cgp_order_goods + '件 | 仅剩' +
											this.goods.total_stock + '件'),
										type: "text",
									}]
								}
							]
						},
						{
							css: {
								color: 'rgba(38, 38, 38, 1)',
								fontSize: '26rpx',
								fontWeight: 'bold',
								marginTop: '20rpx',
								wordBreak: 'break-all',
								textOverflow: 'ellipsis',
								overflow: 'hidden',
								display: '-webkit-box',
								'-webkit-box-orient': 'vertical',
								'-webkit-line-clamp': 2,
							},
							text: this.goods.goods_name,
							type: "text",
						},
						{
							css: {
								position: 'relative',
								marginTop: '20rpx',
								width: '100%',
								height: '210rpx',
								padding: '0'
							},
							type: "view",
							views: [{
								css: {
									height: '210rpx',
									width: '400rpx',
									marginRight: '10rpx',
								},
								type: "view",
								views: [{
										css: {
											display: 'flex',
											flexDirection: 'row',
											alignItems: 'center',
											position: 'absolute',
											top: '0',
											left: '0',
											marginLeft: '15rpx',
										},
										type: "view",
										views: portrait
									},
									{
										css: {
											position: 'absolute',
											bottom: '0',
											left: '0'
										},
										type: "view",
										views: [{
											type: "view",
											views: [{
												css: {
													color: 'rgba(38, 38, 38, 1)',
													fontSize: '20rpx',
												},
												text: this.$zhTran('活动有效期: '),
												type: "text",
											}]
										}, {
											type: "view",
											views: [{
												css: {
													color: 'rgba(166, 166, 166, 1)',
													fontSize: '20rpx',
												},
												text: `${this.activity.start_time+ this.$zhTran(' 至 ') +this.activity.end_time}`,
												type: "text",
											}]
										}]
									}
								]
							}, {
								css: {
									width: '160rpx',
									height: '160rpx',
									position: 'absolute',
									right: '0',
									top: '0'
								},
								type: "view",
								views: [{
									css: {
										width: '160rpx',
										height: '160rpx',
									},
									src: this.options.qr_code,
									type: "image",
								}]
							}, {
								css: {
									width: '160rpx',
									height: '50rpx',
									position: 'absolute',
									right: '0',
									bottom: '-10rpx',
									color: 'rgba(38, 38, 38, 1)',
									fontSize: '22rpx',
								},
								text: this.$zhTran('长按或扫码参与'),
								type: "text",
							}]
						},
					]
				}
			},

			// 金额整数部分
			integer() {
				return formatPrice({
					price: this.goods.min_price,
					take: 'int'
				});
			},

			// 金额小数部分
			decimals() {
				let decimals = formatPrice({
					price: this.goods.min_price,
					take: 'dec',
					prec: this.prec
				})

				// 小数余十不能是 .10||.20||.30以此类推，
				decimals = decimals % 10 == 0 ? decimals.substr(0, decimals.length - 1) : decimals

				return this.autoPrec ?
					(decimals * 1 ? ('.' + decimals) : '') :
					(this.prec ? ('.' + decimals) : '')
			},
		},
		methods: {
			drawCanvas() {
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "png",
					// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
					pathType: "url",
					quality: 1,
					success: (res) => {
						this.$emit("success", res.tempFilePath);
					},
					complete: () => {
						this.$emit("complete");
					},
				});
			},
		},
	};
</script>

<style>

</style>